 <template>
  <div>
    <el-alert
      v-if="!enterpriceInfo.activated"
      show-icon
      :title="enterpriceInfo.status | statueFilter"
      :closable="false"
      :type="enterpriceInfo.status === 'REJECTED' ? 'error' : 'warning'"
    >
      <template>
        <span>未通过理由: {{enterpriceInfo.remark}}</span>
        <span
          @click="activate"
          style="color: #0087f3;margin-left: 5px;cursor:pointer"
        >{{enterpriceInfo.status === 'UNVERIFIED' ? '马上申请' : '重新申请'}}</span>
      </template>
    </el-alert>

    <el-tabs v-model="activeName" @tab-click="changeTab">
      <el-tab-pane label="企业信息" name="info">
        <Info :enterpriceInfo="enterpriceInfo"></Info>
      </el-tab-pane>

      <el-tab-pane label="法人代表" name="legalPerson">
        <LegalPerson :enterpriceInfo="enterpriceInfo"></LegalPerson>
      </el-tab-pane>

      <el-tab-pane label="企业账户" name="account">
        <Account :enterpriceInfo="enterpriceInfo"></Account>
      </el-tab-pane>

      <el-tab-pane label="系统管理员" name="manage">
        <Manage :enterpriceInfo="enterpriceInfo"></Manage>
      </el-tab-pane>

      <el-tab-pane label="业务联系人" name="contact">
        <Contact :enterpriceInfo="enterpriceInfo"></Contact>
      </el-tab-pane>

      <el-tab-pane label="商号和头像" name="weichatInfo">
        <Weichat :enterpriceInfo="enterpriceInfo"></Weichat>
      </el-tab-pane>

      <el-tab-pane label="客服" name="customerService">
        <Service :enterpriceInfo="enterpriceInfo"></Service>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import Info from "./components/info.vue";
import Account from "./components/account.vue";
import Contact from "./components/contact.vue";
import LegalPerson from "./components/legalPerson.vue";
import Manage from "./components/manage.vue";
import Weichat from "./components/weichat.vue";
import Service from "./components/service.vue";

import { getOrganization, putActivated } from "api/profile";
import Activate from "src/components/activate/activate.vue";

export default {
  filters: {
    statueFilter(status) {
      const statusMap = {
        UNVERIFIED: "企业未激活，请填写企业信息后申请激活",
        PENDING: "企业正在申请激活，请等待平台审核", // 银行账户
        REJECTED: "激活被拒绝，请重新申请。" // 银行账户
      };
      return statusMap[status];
    }
  },
  data() {
    return {
      activeName: "info",
      enterpriceInfo: {}
    };
  },
  components: {
    Info,
    Account,
    Contact,
    LegalPerson,
    Manage,
    Activate,
    Weichat,
    Service
  },
  mounted() {
    this.getOrgData();
  },
  methods: {
    changeTab() {},
    activate() {
      this.$confirm("请先确保企业信息已填写完成，再提交审核", "提交申请", {
        confirmButtonText: "确认提交"
      }).then(res => {
        putActivated().then(res => {
          this.$message.success("提交成功，等待平台审核");
          this.getOrgData();
        });
      });
    },
    getOrgData() {
      getOrganization().then(res => {
        this.enterpriceInfo = res;
      });
    }
  }
};
</script>

<style lang="scss" scoped>
@import "src/style/mixin";
.tabList {
  @include fj(flex-start);

  .tabItem {
    padding-left: 20px;
  }

  .is-active {
    color: #47d4bd;
  }
}
</style>
